<template>
    <div>
        <!-- <h1>报告厅申请管理</h1> -->
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>报告厅管理</el-breadcrumb-item>
            <el-breadcrumb-item>申请管理</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
            <el-form ref="form" :inline="true" :model="form" >
                <el-form-item label="校区" prop="school">
                    <el-select v-model="form.school" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="楼栋" prop="region1">
                    <el-select v-model="form.school" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="楼层" prop="region2">
                    <el-select v-model="form.school" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="名称" prop="region2">
                    <el-select v-model="form.school" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="状态" prop="region2">
                    <el-select v-model="form.school" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="价值" prop="price">
                    <el-date-picker v-model="form.school" type="datetime" placeholder="datetime"></el-date-picker>
                </el-form-item>
                
                <el-form-item prop="name">
                    <el-input v-model="form.name" placeholder="请输入申请人名称"></el-input>
                </el-form-item>
                
                <!-- 按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="info" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
        <!-- 功能区域 -->
        <div class="features">
            <div class="btn">
                <el-button @click="hallsExport" icon="el-icon-upload2" size="medium" plain>导出</el-button>
                <el-button @click="hallsDelete" icon="el-icon-delete" size="medium" plain>删除</el-button>
                <!-- <el-button type="danger" size="mini">有{{this.total}}个申请即将到期<i class="el-icon-search el-icon--right"></i></el-button> -->
                <el-tag type="info">总数: {{this.total}} 条</el-tag>
            </div>
        </div>
        
        <!-- 数据展示 -->
        <el-card>
            <!-- table表格区域 -->
            <el-table :data="hallList" stripe :header-cell-style="{backgroundColor:'#f3f3f5'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="auditoriumName" label="名称" width="100px"></el-table-column>
                <el-table-column prop="username" label="申请人" width="100px"></el-table-column>
                <el-table-column prop="jobNumber" label="工号" width="110px"></el-table-column>
                <el-table-column prop="jobNumber" label="单位" width="110px"></el-table-column>
                <el-table-column prop="public_house_apply_time" label="申请使用时间" width="200px"></el-table-column>
                <el-table-column prop="public_house_start_time" label="开始使用时间" width="200px"></el-table-column>
                <el-table-column prop="applyPublicHouseReason" label="申请原因" width="100px"></el-table-column>
                
                <el-table-column prop="auditoriumState" label="空闲状态" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.auditoriumState === '是' ">空闲</el-tag>
                        <el-tag type="warning" v-else>使用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="publicHouseState1" label="处理状态" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.publicHouseState1 === '是' ">已处理</el-tag>
                        <el-tag type="warning" v-else>未处理</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="auditoriumEntry" label="处理状态" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.landEntry === 1 ">已同意</el-tag>
                        <el-tag type="warning" v-else>未处理</el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="250px" fixed="right">
                    <template slot-scope="scope">
                        <!-- 录入按钮 -->
                        <el-tooltip effect="dark" content="录入" placement="top" :enterable="false">
                            <el-button size="mini" type="success" icon="el-icon-download"></el-button>
                        </el-tooltip>
                        
                        <!-- 详情按钮 -->
                        <el-tooltip effect="dark" content="详情" placement="top" :enterable="false">
                            <el-button size="mini" type="info" icon="el-icon-search" @click="showDetails()"></el-button>
                        </el-tooltip>
                        
                        <!-- 编辑按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit()"></el-button>
                        
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteHall(scope.row.publicHouseApplyId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页功能 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.page"
                :page-sizes="[5,10,15]"
                :page-size="queryInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryInfo.total" background>
            </el-pagination>
            
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 申请即将到期的报告厅数量
            total:0,
            queryInfo:{
                page:1,
                size:5,
                total:0
            },
            form:{
                school:'',
                name:''
            },
            hallList:[]
        }
    },
    created(){
        this.getHallList();
        this.getHallTotal();
    },
    methods: {
        onSubmit(){},
        resetForm(){},
        
        // 获取报告厅数据
        async getHallList(){
            await this.$http.get(`auditoriumApply/p/${this.queryInfo.page}/${this.queryInfo.size}`).then(res=>{
                if(res.data.code!==1){
                    return this.$message.error('报告厅申请数据获取失败')
                }
                // const res = await this.$http.get('auditoriumApply');
                // console.log(res);
                this.hallList = res.data.data.list;
                // console.log(this.hallList);
            }).catch((err)=>{
                console.log(err);
            })
        },
        
        // 查询数据总数
        async getHallTotal(){
            await this.$http.get('auditoriumApply/findSums').then(res=>{
                if(res.data.code !==1){
                    return this.$message({
                        message:'总数获取失败',
                        type:'error'
                    })
                }
                this.queryInfo.total = res.data.data
            })
        },
        
        // 分页功能方法
        handleSizeChange(newSize){
            this.queryInfo.size = newSize;
            this.getHallList();
        },
        // 监听页码的变化
        handleCurrentChange(newPage){
            this.queryInfo.page = newPage;
            this.getHallList();
        },
        
        //操作
        async deleteHall(publicHouseApplyId){
            // const res = await this.$http.delete(`auditoriumApply/${publicHouseApplyId}`);
        },
        
        showDetails(){},
        edit(){},
        
        // 导入导出
        hallsExport(){},
        hallsDelete(){},
        
    },
}
</script>
<style scoped>

</style>
